<script setup>
import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useEcharts,echartsObj } from '../composables/useEcharts';
const mapData = ref({})
const mapChart = ref(null)
const getState = async () => {
  const res = await axios.get('/china/data')
  mapData.value = res.data.chinaData
}
onMounted(() => {
  getState().then(() => {
    console.log(mapData.value)
    echartsObj.registerMap('china',mapData.value)
    const echartsInstance = useEcharts(mapChart.value)
    echartsInstance.setOption({
      geo:{
        map:'china',
        itemStyle:{
          areaColor:"#0099ff",
          borderColor:"#00ffff",
          shadowColor:"rgba(230,130,70,0.5)",
          shadowBlur:30,
          emphasis:{
            focus:"self" // 高亮
          }
        }
      },
      tooltip:{
        trigger:"item",
      },
      title:{
        text:"城市销量",
        left:"45%",
        textStyle:{
          color:"#fff",
          fontSize:20,
          textShadowBlur:10,
          textShadowColor:"#33ffff"

        }
      },
      visualMap:{
        type:"continuous", // 连续型
        min:0,
        max:10000,
        text:['高','低'],
        //realtime:false,
        calculable:true, // 是否允许拖拽滑动
        inRange:{
          color:['#50a3ba','#eac736','#d94e5d']
        },
        textStyle:{
          color:"#fff"
        }
      },
      series:[
        {
          type:"scatter",
          // itemStyle:{
          //   color:"red"
          // },
          coordinateSystem:"geo",
          data:[
          {name:'北京',value:[116.46,39.92,4367]},
          {name:'上海',value:[121.48,31.22,8675]},
          {name:"西安",value:[120.15,36.59,3421]},
          {name:"杭州",value:[120.19,30.26,1234]},
          {name:'周口',value:[114.35,34.27,10000]},
          {name:'广州',value:[113.27,23.13,187]},
          ]
            
          
        }
        
      ]
    })
  })
})

</script>

<template>
  <div class="map" ref="mapChart">
  </div>
</template>

<style lang="less">
.map {
  width: 100%;
  height: 100%;
}
</style>
